<template>
    <div>
        <Row type="flex" justify="space-around" :gutter="20">
            <Col span="24">
                <Card>
                    <div>
                        <h2 style="text-align:center">各项统计</h2>
                        <Divider/>
                        <Row style="height: 500px;overflow-y: auto;" type="flex" justify="space-around" :gutter="20">
                            <Col span="8" style="padding: 20px;">
                                <Form inline>
                                    <FormItem>
                                        <DatePicker v-model="cityBLTime" type="datetimerange"
                                                    format="yyyy-MM-dd HH:mm" placeholder="请选择市各统计时间段"
                                                    style="width: 300px"></DatePicker>
                                    </FormItem>
                                    <FormItem>
                                        <Button :loading="loading.cityBLBtn" type="primary" @click="cityBLAction">
                                            查询市各统计项(办理)
                                        </Button>
                                    </FormItem>
                                </Form>
                                <br>
                                <div>
                                    <p>共计申报办理 {{cityBLData.allnum}} 人</p>
                                    <p>沈阳市民 {{cityBLData.localnum}} 人</p>
                                    <p>外地来沈人员 {{cityBLData.outnum}} 人</p>
                                    <p>其中居民出入通行证转换 {{cityBLData.oldnum}} 人</p>
                                    <p>新增办理 {{cityBLData.newnum}} 人</p>
                                    <p>身份验证正确 {{cityBLData.truenum}} 人</p>
                                    <p>身份验证错误 {{cityBLData.falsenum}} 人</p>
                                    <p>身份验证待审核 {{cityBLData.daishenhe}} 人</p>
                                    <p>绿色通行证 {{cityBLData.green}} 人</p>
                                    <p>黄色通行证 {{cityBLData.yellow}} 人</p>
                                    <p>红色通行证 {{cityBLData.red}} 人</p>
                                </div>
                            </Col>
                            <Col span="8" style="padding: 20px;">
                                <Form inline>
                                    <FormItem>
                                        <DatePicker v-model="areaBLTime" type="datetimerange"
                                                    format="yyyy-MM-dd HH:mm" placeholder="请选择区县统计时间段"
                                                    style="width: 300px"></DatePicker>
                                    </FormItem>
                                    <FormItem>
                                        <Button :loading="loading.areaBLBtn" type="primary" @click="areaBLAction">
                                            查询区县统计项(办理)
                                        </Button>
                                    </FormItem>
                                </Form>
                                <br>
                                <Table :loading="loading.areaBLBtn" :columns="tableColumns.areaBL"
                                       :data="tableData.areaBL"></Table>
                            </Col>
                            <Col span="8" style="padding: 20px;">
                                <Form inline>
                                    <FormItem>
                                        <DatePicker v-model="streetBLTime" type="datetimerange"
                                                    format="yyyy-MM-dd HH:mm" placeholder="请选择街道统计时间段"
                                                    style="width: 300px"></DatePicker>
                                    </FormItem>
                                    <FormItem>
                                        <Select v-model="streetType" clearable style="width:300px" placeholder="请选择街道">
                                            <Option value="Heping District,和平区,화평구">和平区</Option>
                                            <Option value="Shenhe District,瀋河区,沈河区,심하구">沈河区</Option>
                                            <Option value="Tiexi District,鉄西区,铁西区,철서구">铁西区</Option>
                                            <Option value="Huanggu District,皇姑区,황고구">皇姑区</Option>
                                            <Option value="Dadong District,大東区,大东区,황고구">大东区</Option>
                                            <Option value="Hunnan District,渾南区,浑南区,훈남구">浑南区</Option>
                                            <Option value="Yuhong District,于洪区,우홍구">于洪区</Option>
                                            <Option value="Shenbei New District,瀋北新区,沈北新区,심북신구">沈北新区</Option>
                                            <Option value="Sujiatun District,蘇家屯区,苏家屯区,소가툰구">苏家屯区</Option>
                                            <Option value="Liaozhong District,遼中区,辽中区,요중구">辽中区</Option>
                                            <Option value="Xinmin District,新民市,요중구">新民市</Option>
                                            <Option value="Faku County,法庫県,法库县,법고현">法库县</Option>
                                            <Option value="Kangping County,康平県,康平县,강평현">康平县</Option>
                                        </Select>
                                    </FormItem>
                                    <FormItem>
                                        <Button :loading="loading.streetBLBtn" type="primary" @click="streetBLAction">
                                            查询街道统计项(办理)
                                        </Button>
                                    </FormItem>
                                </Form>
                                <br>
                                <Table :loading="loading.streetBLBtn" :columns="tableColumns.streetBL"
                                       :data="tableData.streetBL"></Table>
                            </Col>
                        </Row>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import {
  getCityBL,
  getAreaBL,
  getStreetBL
} from '@/api/statistics'
import { formatDate } from '@/components/dateFormat'

export default {
  name: 'areaCard',
  props: {},
  data () {
    return {
      loading: {
        cityBLBtn: false,
        areaBLBtn: false,
        streetBLBtn: false
      },
      streetType: '',
      cityBLTime: '',
      areaBLTime: '',
      streetBLTime: '',
      cityBLData: {},
      tableColumns: {
        areaBL: [
          {
            title: '名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '数量',
            key: 'num',
            align: 'center'
          }
        ],
        streetBL: [
          {
            title: '名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '数量',
            key: 'num',
            align: 'center'
          }
        ]
      },
      tableData: {
        areaBL: [],
        streetBL: []
      },
      waijiData: [
        {
          name: ['', '未设置'],
          mainName: '未定义',
          value: 0
        },
        {
          name: ['Heping District', '和平区', '화평구'],
          mainName: '和平区',
          value: 0
        },
        {
          name: ['Shenhe District', '瀋河区', '沈河区', '심하구'],
          mainName: '沈河区',
          value: 0
        },
        {
          name: ['Tiexi District', '鉄西区', '铁西区', '철서구'],
          mainName: '铁西区',
          value: 0
        },
        {
          name: ['Huanggu District', '皇姑区', '황고구'],
          mainName: '皇姑区',
          value: 0
        },
        {
          name: ['Dadong District', '大東区', '大东区', '황고구'],
          mainName: '大东区',
          value: 0
        },
        {
          name: ['Hunnan District', '渾南区', '浑南区', '훈남구'],
          mainName: '浑南区',
          value: 0
        },
        {
          name: ['Yuhong District', '于洪区', '우홍구'],
          mainName: '于洪区',
          value: 0
        },
        {
          name: ['Shenbei New District', '瀋北新区', '沈北新区', '심북신구'],
          mainName: '沈北新区',
          value: 0
        },
        {
          name: ['Sujiatun District', '蘇家屯区', '苏家屯区', '소가툰구'],
          mainName: '苏家屯区',
          value: 0
        },
        {
          name: ['Liaozhong District', '遼中区', '辽中区', '요중구'],
          mainName: '辽中区',
          value: 0
        },
        {
          name: ['Xinmin District', '新民市', '요중구'],
          mainName: '新民市',
          value: 0
        },
        {
          name: ['Faku County', '法庫県', '法库县', '법고현'],
          mainName: '法库县',
          value: 0
        },
        {
          name: ['Kangping County', '康平県', '康平县', '강평현'],
          mainName: '康平县',
          value: 0
        }
      ]
    }
  },
  methods: {
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    // 多国语拼装处理
    assembleHandle (data) {
      let arr = []
      let list = this.$common.xeUtils.clone(this.waijiData, true)
      data.forEach(itemD => {
        list.forEach(itemL => {
          if (this.$common.xeUtils.includes(itemL.name, itemD.name)) {
            itemL.value += itemD.num
          }
        })
      })
      list.forEach(item => {
        arr.push({ name: item.mainName, num: item.value })
      })
      return arr
    },
    cityBLAction () {
      const startTime = this.cityBLTime[0] !== '' ? formatDate(this.cityBLTime[0], 'yyyy-MM-dd hh:mm:ss') : ''
      const endTime = this.cityBLTime[1] !== '' ? formatDate(this.cityBLTime[1], 'yyyy-MM-dd hh:mm:ss') : ''
      this.loading.cityBLBtn = true
      const param = {
        startTime: startTime,
        endTime: endTime
      }
      getCityBL(param).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.cityBLData = data.data
          this.loading.cityBLBtn = false
        } else {
          this.error(data)
          this.loading.cityBLBtn = false
        }
      })
    },
    areaBLAction () {
      const startTime = this.areaBLTime[0] !== '' ? formatDate(this.areaBLTime[0], 'yyyy-MM-dd hh:mm:ss') : ''
      const endTime = this.areaBLTime[1] !== '' ? formatDate(this.areaBLTime[1], 'yyyy-MM-dd hh:mm:ss') : ''
      this.loading.areaBLBtn = true
      const param = {
        startTime: startTime,
        endTime: endTime
      }
      getAreaBL(param).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.tableData.areaBL = this.assembleHandle(data.data)
          this.loading.areaBLBtn = false
        } else {
          this.error(data)
          this.loading.areaBLBtn = false
        }
      })
    },
    streetBLAction () {
      if (this.streetType !== '') {
        const startTime = this.streetBLTime[0] !== '' ? formatDate(this.streetBLTime[0], 'yyyy-MM-dd hh:mm:ss') : ''
        const endTime = this.streetBLTime[1] !== '' ? formatDate(this.streetBLTime[1], 'yyyy-MM-dd hh:mm:ss') : ''
        this.loading.streetBLBtn = true
        const param = {
          startTime: startTime,
          endTime: endTime,
          areaName: this.streetType
        }
        getStreetBL(param).then(ret => {
          const data = ret.data
          if (data.errcode === 0) {
            this.tableData.streetBL = data.data
            this.loading.streetBLBtn = false
          } else {
            this.error(data)
            this.loading.streetBLBtn = false
          }
        })
      } else {
        this.$Message.warning('请选择街道')
      }
    }
  },
  mounted () {
  },
  watch: {},
  computed: {}
}
</script>

<style scoped>
</style>
